<template>
	<view class="rank-body">
		<!-- <view>
			<u-subsection mode="subsection" :list="tabList" :current="curNow" @change="sectionChange"></u-subsection>
		</view> -->
		<view class="myRank">
			<text style="padding-left: 10px;">我的名次</text>
			<view class="rank-item">
				<view class="current-rank">
					<view class="current-text">
						{{ myRanking.ranking }}
					</view>
				</view>
				<view class="dsb" style="width:100%">
					<view class="avatar-container">
						<view style="margin-right: 30rpx;">
							<u-avatar :src="myRanking.avatar"></u-avatar>
						</view>
						<view>{{ myRanking.nickname }}</view>
					</view>
					<view class="rank-money">
						<text>￥{{ myRanking.total }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="allRank">
			<text style="padding-left: 10px;">总排行</text>
			<view class="rank-item" v-for="(item, index) in rankList" :key="index">

				<view :class="['current-rank', { 'blackFont': index >= 3 }]"
					:style="[{ 'background-image': 'url(' + '.././../static/rank' + (index + 1) + '.jpg)' }]">
					<!-- <view class="current-rank" :style="[ {'background-image': 'url(' + '.././../static/rank'+ (index + 1) +'.jpg)'} ]"> -->
					<view class="defaultRank">
						<!-- <view class="current-text" :class="['defaultRank', {'top-three': index < 3}]" :style="{ backgroundImage: 'url(' + item.bgImage + ')' }"> -->
						{{ index + 1 }}
					</view>
				</view>
				<view class="dsb" style="width:100%">
					<view class="avatar-container">
						<view style="margin-right: 30rpx;">
							<u-avatar :src="item.avatar"></u-avatar>
						</view>
						<view>{{ item.nickname }}</view>
					</view>
					<view class="rank-money">
						<text>￥{{ item.total }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			curNow: 0,
			current: 1,
			// tabList: [
			// 	'本月业绩', '上月业绩'
			// ],
			rankList: [],//排行列表
			myRanking: {},//我的排名
		};
	},
	onLoad(options) {
		this.getRankList()
	},
	methods: {
		getRankList() {
			this._post_form('api/user/getRanking', {}, (res) => {
				console.log('%c [ res ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', res)
				if (res.code == 1) {
					this.myRanking = res.data.myRanking
					this.rankList = res.data.userlist
				} else {
					uni.showToast({
						title: res.msg || '获取排名失败',
						icon: 'none'
					});
				}
			})
		},
		sectionChange(index) {
			this.curNow = index;
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
		}
	}
}
</script>

<style lang="scss">
.dsb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.blackFont {
	color: #000 !important;
}

.defaultRank {
	position: absolute;
	font-weight: 600;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.rank-body {
	background-color: #F4F5F7;
	height: 100vh;

}

.allRank {
	background-color: #fff;
	padding-top: 20rpx;
	margin-top: 20rpx;
}

.myRank {
	background-color: #fff;
	padding-top: 20rpx;
}

.rank-item {
	display: flex;
	padding: 20rpx;
	align-items: center;

	border-bottom: #EFEFEF 1rpx solid;

	.current-rank {
		position: relative;
		color: #fff;
		width: 100rpx;
		height: 80rpx;
		margin-right: 30rpx;
		background-image: url('.././../static/start.jpg');
		background-size: cover;

		.current-text {
			color: #fff;
			position: absolute;
			font-weight: 600;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.avatar-container {
		display: flex;
		align-items: center;
	}

	.rank-money {
		font-weight: 600;
		font-size: 38rpx;
		color: #D32C0B;
		display: flex;
	}
}
</style>